<template>
  <ContentWrap>
    <div class="headBox flex-s">
      <div class="goBack flex-s" @click="goBack">
        <el-icon><ArrowLeftBold /></el-icon>
        <span class="ml-2 mr-12">返回</span>
      </div>
      <div>施工日志详情</div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">项目信息</div>
      </div>
      <div class="content_main">
        <el-row :gutter="16">
          <el-col :span="6">
            <el-form-item label="日志编号:">{{ formData.data.constructionSn ? formData.data.constructionSn : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="施工时间:">{{ formData.data.constructionTime ? formatDate(formData.data.constructionTime) : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="上传时间:">{{ formData.data.createTime ? formatDate(formData.data.createTime) : '-' }}</el-form-item>
          </el-col>        
          <el-col :span="6">
            <el-form-item label="上传人:">{{ formData.data.employeeName ? formData.data.employeeName : '-' }}</el-form-item>
          </el-col>  
          <el-col :span="6">
            <el-form-item label="施工项目:">{{ formData.data.projectTitle ? formData.data.projectTitle : '-' }}</el-form-item>
          </el-col>      
          <el-col :span="6">
            <el-form-item label="项目负责人:">{{ formData.data.projectLeader ? formData.data.projectLeader : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:">{{ formData.data.projectDepartment ? formData.data.projectDepartment : '-' }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="项目时间:">{{ formData.data.projectDate ? formData.data.projectDate : '-' }}</el-form-item>
          </el-col>        
        </el-row>
      </div>
    </div>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">施工人员信息</div>
      </div>
      <div class="content_main" v-if="formData.data.constructionLogsInfo.employeesAttr && formData.data.constructionLogsInfo.employeesAttr.length > 0">
        <el-table :data="formData.data.constructionLogsInfo.employeesAttr">
          <el-table-column align="center" prop="name" label="姓名" />
          <el-table-column align="center" prop="photo" label="工种">
            <template #default="scope">
              {{ scope.row.getSkill.map(item => item.jobType).join('/') ? scope.row.getSkill.map(item => item.jobType).join('/') : '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="idCard" label="身份证" />
          <el-table-column align="center" prop="phone" label="联系电话">
            <template #default="scope">
              {{ scope.row.phone ? scope.row.phone : '-' }}
            </template>
          </el-table-column>
          <el-table-column align="center" prop="getSkill" label="技能证书" >
            <template #default="scope">
              <div class="flex-c" v-if="scope.row.getSkill.map(item => item.skillCertificate).length > 0">
                <div v-for="curr in scope.row.getSkill" :key="curr.skillCertificate">
                  <div class="mr-12" v-if="imgTypeList.includes(curr.certificateAttachment.slice(curr.certificateAttachment.lastIndexOf('.') + 1))">
                    <el-link target="_blank" @click="imgPreview(curr.certificateAttachment)">{{ curr.skillCertificate }}</el-link>
                  </div>
                  <el-link class="mr-12" v-else :href="curr.certificateAttachment" target="_blank">{{ curr.skillCertificate }}</el-link>
                </div>
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-empty v-else class="p-0" :image-size="100" description="暂无数据" />
    </div>
    <div class="content mb-0">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">施工日志信息</div>
      </div>
      <div class="content_main">
        <div class="mt-12 flex-s">
          <div class="main_lable">施工日志：</div> 
          <div class="flex-s" v-if="formData.data.logContent && formData.data.logContent.length > 0">
            <div class="mr-50 flex-s" v-for="item in formData.data.logContent" :key="item.url">
              <div v-if="imgTypeList.includes(item.extension)">
                <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
              </div>
              <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 flex-s">
          <div class="main_lable">安全交底：</div> 
          <div class="flex-s" v-if="formData.data.safetyDisclosure && formData.data.safetyDisclosure.length > 0">
            <div class="mr-50 flex-s" v-for="item in formData.data.safetyDisclosure" :key="item.url">
              <div v-if="imgTypeList.includes(item.extension)">
                <el-link target="_blank" @click="imgPreview(item.url)">{{ item.filename }}</el-link>
              </div>
              <el-link v-else :href="item.url" target="_blank">{{ item.filename }}</el-link>
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">特种作业：</div> 
          <div class="flex-s" v-if="formData.data.specialOperations">
            <div class="flex-s mr-50" v-for="item in formData.data.specialOperations.split(',')" :key="item">
              <el-link target="_blank" @click="goSpecial(item)">{{ item }}</el-link>
            </div>
          </div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable">现场图片：</div> 
          <div class="imgBox flex-s" v-if="formData.data.sitePhotos && formData.data.sitePhotos.length > 0">
            <div v-for="(item,index) in formData.data.sitePhotos" :key="item">
              <el-image
                style="width: 200px; height: 100px"
                class="mr-30 mb-24"
                :src="item"
                :preview-src-list="formData.data.sitePhotos"
                :initial-index="index"
                show-progress
              />
            </div>
          </div>
          <div v-else>-</div>
        </div>
        <div class="mt-12 df">
          <div class="main_lable flex-e">备注：</div> 
          <div class="flex-s">{{ formData.data.remark ? formData.data.remark : '-' }}</div>
        </div>
      </div>
    </div>
  </ContentWrap>
  <!-- 图片预览 -->
  <el-image-viewer
    v-if="showImagePreview"
    :zoom-rate="1.2"
    @close="closePreview"
    :url-list="[imgPreviewUrl]"
  />
</template>
<script setup>
  import {ref, reactive, inject} from "vue"
  import * as ContractApi from '@/api/viewsApi/contract'
  import { getDailyLogDetail } from '@/api/viewsApi/dailyLog'
  import { ArrowLeftBold } from '@element-plus/icons-vue'
  import { formatDate } from '@/utils/formatTime'
  const router = useRouter()
  const message = useMessage() // 消息弹窗
  const goBack = inject('goBack', () => {})
  const formData = reactive({
    data: {
      constructionSn: '', // 施工编号
      constructionTime: '', // 施工时间
      createTime: '', // 上传时间
      employeeName: '', // 上传人
      projectTitle: '', // 施工项目
      projectLeader: '', // 项目负责人
      projectDepartment: '', // 所属部门
      projectDate: '', // 项目时间
      constructionLogsInfo: {}, // 施工人员信息
      logContent: [], // 施工日志
      safetyDisclosure: [], // 安全交底
      specialOperations: '', // 特种作业
    }
  })
  const loading = ref(false)
  const pageStatus = ref(1) // 1新增  2编辑
  const imgTypeList = ['jpg', 'jpeg', 'png', 'webp']
  /** 初始化 **/
  /** 查询详情信息 */
  const init = async (id) => {
    loading.value = true
    try {
      const data = await getDailyLogDetail(id)
      formData.data = data
    } finally {
      loading.value = false
    }
  }
  const showImagePreview = ref(false)
  const imgPreviewUrl = ref('')
  const imgPreview = (url) => {
    imgPreviewUrl.value = url
    showImagePreview.value = true
  }

  const closePreview = () => {
    imgPreviewUrl.value = ''
    showImagePreview.value = false
  }


  const goSpecial = (item) => {
    router.push({
      path: '/construction/specialWork/index',
      query: {
        id: item,
      }
    })
  }

  defineExpose({
    init,
  })
</script>
<style lang="scss" scoped>
  .content{
      width: 100%;
      min-height: 80px;
      padding: 6px;
      margin-bottom: 24px;
      box-sizing: border-box;
      .content_head {
          margin-bottom: 24px;
          .line {
              width: 5px;
              height: 21px;
              background: #50B5FF;
          }
          .title {
              font-size: 18px;
              color: #333;
              margin-left: 12px;
              font-weight: 600;
          }
      }
      .content_main {
          width: 100%;
          padding: 0 16px;
          box-sizing: border-box;
          font-size: 14px;
      }
  }
  ::v-deep .el-form-item{
    width: 100%;
  }
  .formInp{
    width: 100%;
  }

  .headBox{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    color: #1D1D1D;
  }

  .goBack {
      cursor: pointer;
  }
  .main_title {
    background: #e6e4e4;
    border-radius: 6px;
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    padding: 6px 12px;
    box-sizing: border-box;
    color: #1D1D1D;
  }
  .imgBox{
    width: calc(100% - 72px);
    flex-wrap: wrap;
  }
  .demo-image__error .image-slot {
    font-size: 30px;
  }
  .demo-image__error .image-slot .el-icon {
    font-size: 30px;
  }
  .demo-image__error .el-image {
    width: 100%;
    height: 200px;
  }
  .main_lable{
    font-family: PingFang SC, PingFang SC;
    font-weight: 600;
    font-size: 14px;
    width: 72px;
    color: #1D1D1D;
  }

</style>
